<html>
	<head>
		<link rel="stylesheet" href="../assets/css/bootstrap.css">
		<link rel="stylesheet" href="../assets/css/bootstrap-tabs.css">
		<link rel="stylesheet" href="../assets/css/metro-all.css">
		<link rel="stylesheet" href="../assets/css/index.css">
		<link rel="stylesheet" href="../assets/css/metro-icons.css">
		<link rel="stylesheet" href="../assets/css/all.css">
		<script>
		    window.jQuery = window.$ = require('../assets/js/jquery.js');
		    const error_page = require('../assets/js/error_page.js');
		</script>
		<script src="../assets/js/metro.js"></script>
		<script src="../assets/js/bootstrap.bundle.min.js"></script>
		<!-- <script src="../assets/js/tab.js"></script> -->
	</head>
	<body>
		<!-- <ul class="nav nav-tabs drag" id="tabs"> -->


			<div class="window">
			    <div class="window-caption drag">
			    	<ul class = "nav nav-tabs" id = "tabs">
			    		<li id = "new-tab-button" style="margin-top:5px;width: 40px;"><button class="button" onclick = "newTab('https://google.com')"><span class = "mif-plus fg-black" style="font-size:10px;"></span></button></li>
			    	</ul>
			        <!-- <li id = "tab1asd"><a href=""  role="tab" data-toggle="tab" data-target = "#tab1"><span onclick = "opentab(this)"> filename</span><span onclick = "closeAnyFile(this)" class="close black"></span></a></li>
					<li id = "tab2asdd"><a href=""  role="tab" data-toggle="tab" data-target = "#tab2"><span onclick = "opentab(this)"> filename</span><span onclick = "closeAnyFile(this)" class="close black"></span></a></li>
					<li id = "tab3adsf"><a href=""  role="tab" data-toggle="tab" data-target = "#tab3"><span onclick = "opentab(this)"> filename</span><span onclick = "closeAnyFile(this)" class="close black"></span></a></li> -->
			        <div class="buttons">
			            <span class="btn-min" onclick = "minimize_app()"></span>
			            <span class="btn-max" onclick = "maximize_app()"></span>
			            <span class="btn-close" onclick = "close_app()"></span>
			        </div>
			    </div>
			    <div class="window-content tab-content" id = "browsers">
			        <!-- <div class="tab-pane" id = "tab1">
						<div class = "url-bar-header">
							<div class = "url-bar-buttons">
							<button class="button cycle"><span class="mif-arrow-left"></span></button>
							<button class="button cycle"><span class="mif-arrow-right"></span></button>
							<button class="button cycle"><i class="fas fa-redo-alt"></i></button>
							</div>
							<div class="url-bar-container">
								<input type = "text" id = "url" class = "url-bar" value = "">
							</div>
						</div>
						<webview id="foo" src = "https://google.com" class = "webview"></webview>
					</div>
					<div class="tab-pane" id = "tab2"><h1>Tab2</h1></div>
					<div class="tab-pane" id = "tab3"><h1>Tab3</h1></div> -->
			    </div>
			</div>
		<!-- </ul> -->
		<!-- <div class="tab-content" id = "browser">
			
		</div> -->
		<!-- <webview id="foo" src="https://www.google.com/" style="width:100%; height:100%;"></webview> -->

		<div id = "popover-content-menu" class = "hide">
			<a class="dropdown-item share-button" href="#" data-toggle="popover" data-placement="left" data-html = "true" id = "domain-form" >Share</a>
			<!-- <a class="dropdown-item" href="#">Sign up</a> -->
			<div class="dropdown-divider"></div>
			<a class="dropdown-item" onclick="openAbout()">About</a>
			<!-- <a class="dropdown-item" href="#">Exit</a> -->
		</div>

		<div id = "popover-content-domain-form" class="hide">
			<center>
				<input type = "text" placeholder="Domain" class = "domain_name_field"><br>
				<button class = "button" onclick="share_website()">Share</button><br>
				<span class = "domain-error"></span>
			</center>
		</div>
	</body>
	<script src="../assets/js/index.js"></script>
	<script src="../assets/js/key_binding.js"></script>
</html>